<script setup lang='tsx'>
import { ref } from 'vue';
import ProButton from '../components/ProButton/index.vue';
import { DialogInstance } from 'tdesign-vue-next';
const loading = ref(false);

const disabled = ref(false);

const confirmBtn = ref({
    content: '保存',
    disabled: false,
    loading: false
})

const content = () => <span>是否保存关于【 <span style={{ color: 'red' }}>刘军</span> 】的数据</span>

setTimeout(() => {
    disabled.value = true
}, 1000)

function handleConfirm(instance: DialogInstance | null) {
    loading.value = true;
    confirmBtn.value.loading = true;
    confirmBtn.value.disabled = true;
    confirmBtn.value.content = '保存中...';

    setTimeout(() => {
        instance!.hide();
        loading.value = false;
        confirmBtn.value.loading = false;
        confirmBtn.value.disabled = false;
        confirmBtn.value.content = '保存';
    }, 3000)
}
</script>

<template>
    <div>
        <ProButton v-model:loading="loading" :confirm-btn="confirmBtn" @confirm="handleConfirm"
            :content="content" mode="popup" />
    </div>
</template>

<style lang='scss'></style>
